import React from 'react';

class Cnav extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'Cnav';

        // mode 有2个选项，
        // athlete 是运动员主页的形式
        // club 是俱乐部主页的形式
        // athleteItems/clubItems 分别是 athlete/club mode 下的选项

        // divScrollTop 是 每一个部分到页面顶部的高度
        // navPosition 是 滚动时 Cnav 应该在的位置
        this.state = {
            mode: props.mode,
            clubItems: [ '赛程' , '运动员', '视频', '评论' ],
            athleteItems: [ '联 盟对比' , '赛季数据', '最近5场', '评论' ],
            divScrollTop:[],
            // navPosition 是 滚动时 Cnav 应该在的位置
            navPosition: 0
        }
    }

    handleScroll () {
        console.log( 'scroll');
        let divsTop = this.state.divScrollTop;

        let bodyTop = $("body").scrollTop();

        let navUl= $(".cnav>ul");


        console.log( bodyTop);
       // 当页面滚动到两个 div 之间的时候，传送相应的 nav 的号码，在 cnav 组件里修改 nav 的class
       $.each(divsTop, ( index, el ) => {
            let navActive = navUl.find(".active");

            if( bodyTop > el-1 && bodyTop < divsTop[index+1]) {
                let num = index;

                // this.props.passNavPosition(num);

                this.setState({
                    navPosition: num
                });
            }
        })
    }

    componentDidMount() {
        console.log("Cnav did Mount");
        // 取得每个div 到页面顶部的高度

        let divs = $("section.scroll");
        let navHeight = $(".snav").outerHeight(true);
        let divsH = [];

        console.log(`navHeight: ${navHeight}`);

        // 每个 div 的 scrollTop 是 offset.top - navHeight
        divs.each(function(index, el) {
            let me = $(this);
            console.log( me.offset().top);
            divsH[index] = me.offset().top-navHeight;
        });
        console.log(divsH);

        this.setState({
            divScrollTop: divsH
        });

           // 监听页面滚动
        window.addEventListener('scroll', this.handleScroll.bind(this));

    }

    onHandleNavClick( index ) {
        console.log( 'onHandleNavClick start' );

        // 当点击 nav 时候滚动到相应的 div 位置。
        // 并将相应的 nav 的class 变成 active
        console.log( `navPosition set !!!! ${index}`);
        this.setState({
            navPosition: index
        });
        let divT = this.state.divScrollTop[index];

        console.log( `navPosition set over: ${this.state.navPosition}` );

        //  滚动到底的提示
        if( $(window).scrollTop() + $(window).height() >= $('body').height() && divT + $(window).height() >= $('body').height() ){
            console.log("到底了@－@");
        } else {
            $("body").scrollTop( divT );
        }
    }

    render() {

        console.log("cnav render");
        console.log( `navPosition: ${this.state.navPosition}` );
        let navItems = this.state.mode=="athlete"? this.state.athleteItems : this.state.clubItems ;
        let navPosition = this.state.navPosition;

        let navs = navItems.map(function(item, index) {

            return (
                <li key={index} data-index={index} className={index==(navPosition || 0) ?'active':'' } ><a onClick={this.onHandleNavClick.bind(this, index)} >{item} </a></li>
            );
        }.bind(this))

        return (
            <nav className='cnav'>
                <ul>
                    {navs}
                </ul>
            </nav>
        );
    }
}

export default Cnav;
